<template>
  <q-dialog v-model="cartDialog" full-width position="bottom">
    <q-card flat class="full-width bg-grey-2">
      <div style="height: 4px;" class="bg-orange"></div>
      <q-card-section class="row justify-between items-center no-wrap">
        <div class="flex items-center no-wrap">
          <q-btn icon="keyboard_arrow_down" dense round outline color="grey-8" v-close-popup />
          <div class="q-pl-sm">
            <div>共{{ totalAmount }}件商品</div>
            <div>累计{{ totalMoney.join('') }}元</div>
          </div>
        </div>

        <q-btn icon="delete_forever" label="清空购物车" color="grey-7" dense flat @click="clearCart" />
      </q-card-section>

      <q-card-section class="bg-white q-mx-md" style="border-radius: 10px; max-height: 76vh; overflow: auto">
        <goodsItem dense :item="item" @add="addCart(item)" @remove="removeCart(item)" v-for="(item, idx) in carts" :key="idx" />
      </q-card-section>
    </q-card>
  </q-dialog>
</template>

<script>
import { defineComponent } from 'vue';
import goodsItem from './goodsItem.vue';

export default defineComponent({
  name: 'CartDialog',
  components: {
    goodsItem
  },
  data () {
    return {
      shopId: '',
      shopName: '',
      carts: [],
      cartDialog: false
    }
  },
  mounted () {
    this.shopId = this.$q.localStorage.getItem('myShop');

    // 取店铺信息
    this.$axios.get('/c/shop/info', { params: { id: this.shopId } }).then(({ data }) => {
      this.shopName = data.shop.shop_name;
    });

    if (this.$q.localStorage.has(this.cartId)) {
      this.carts = this.$q.localStorage.getItem(this.cartId).carts;
    }
  },
  methods: {
    splitMoney (money) {
      const arr = String(Number(Number(money).toFixed(2))).split('.');
      if (arr.length === 1) {
        return [arr[0], ''];
      } else {
        return [arr[0], '.' + arr[1]];
      }
    },
    addCart (item) { // 添加到购物车
      const cart = this.carts.find(cart => cart.uid === item.uid);
      if (cart) {
        cart.cart_amount += 1;
      } else {
        item.cart_amount = 1;
        this.carts.push(item);
      }
      this.$q.localStorage.set(this.cartId, { shopName: this.shopname, carts: this.carts });
      this.$emit('update', this.carts);
    },
    removeCart (item) { // 移除购物车
      const idx = this.carts.findIndex(cart => cart.uid === item.uid);
      if (idx >= 0) {
        const cart = this.carts[idx];
        cart.cart_amount -= 1;
        if (cart.cart_amount <= 0) {
          this.carts.splice(idx, 1);
        }
      }
      if (this.carts.length > 0) {
        this.$q.localStorage.set(this.cartId, { shopName: this.shopName, carts: this.carts });
      } else {
        this.$q.localStorage.remove(this.cartId);
      }
      this.$emit('update', this.carts);
    },
    clearCart () { // 清空购物车
      for (const item of this.carts) {
        delete item.cart_amount;
      }
      this.carts = [];
      this.$q.localStorage.remove(this.cartId);

      this.$emit('update', this.carts);
      this.cartDialog = false;
    },
    show () {
      this.cartDialog = true;
    }
  },
  computed: {
    cartId () {
      return `${this.shopId || ''}_carts`;
    },
    totalMoney () {
      const money = this.carts.reduce((a, b) => a + Number(b.sale_price) * Number(b.cart_amount), 0);
      return this.splitMoney(money);
    },
    totalAmount () {
      return this.carts.reduce((a, b) => a + b.cart_amount, 0);
    }
  }
});
</script>
